<template>
	<div class="shipin_shi">
		<div class="shipinxin" v-for="(item,index) in 5" :key="index">
			<img src="../../../assets/img/shipin.png" />
			<div class="remen_shuju">
				<div class="remen_shuju1">
					<div class="shipin_dianzan">
						<img src="../../../assets/img/dianzan2.png" />
						<span>
							{{shuzi | dian}}
						</span>
					</div>
				</div>
				<div class="remen_shuju2">
					<h2>央视新闻</h2>
					<p>
						@外交部发言人办公室粉丝po千万！祝贺！我们一起传递千万！祝贺！我们一起传递
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				shuzi:87349,
			}
		},
		mounted:function(){
			var _self=this;
			
			$(".shipinxin").hover(function(){
				$(this).children(".remen_shuju").children(".remen_shuju2").css({"display":"none"});
				$(this).siblings().children(".remen_shuju").children(".remen_shuju2").css({"display":"block"});
			},function(){
				$(this).children(".remen_shuju").children(".remen_shuju2").css({"display":"block"});
			})
			
			//滑动页面出现动效
			window.addEventListener("scroll",this.handleScroll);
			
			// console.log($(".shipin_shi").offset().top/1.35,"top")
		},
		destroyed() {
			window.removeEventListener('scroll',this.handleScroll,false)
		},
		//过滤器
		filters:{
		  dian(dianzan){
			  if(dianzan>0){
				var wan1=parseInt(dianzan).toString();
				var qumo=wan1%10000;
				//粉丝数改变
				if(wan1.length<5){
					dianzan=wan1;
				}else if(wan1.length>4 && wan1.length<=8){
					let fen_si1=parseFloat(parseInt(wan1/10000))+'.'+qumo.toString().substring(0,2)+'万';
					dianzan=fen_si1;
				}else if(wan1.length>8){
					let fen_si1=parseFloat(parseInt(wan1/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
					dianzan=fen_si1;
				}
			  }
			  return dianzan
		  }
		},
		
		methods:{
			
			//实现当滚动到指定位置触发动画
			handleScroll(){
			  var scrollT=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			  // console.log(scrollT)
			  
			  if(scrollT<$(".shipin_shi").offset().top/1.35){
			  	  $(".shipin_shi .shipinxin").removeClass("animate__animated animate__fadeInUp")
			  }
			  if(scrollT>=$(".shipin_shi").offset().top/1.35){
				  $(".shipin_shi .shipinxin").addClass("animate__animated animate__fadeInUp")
			  }
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.shipin_shi{
		height: 10rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.shipinxin{
			width: 6rem;
			overflow: hidden;
			position: relative;
			
			img{
				transition: all 1s ease;
				width: 6rem;
				cursor: pointer;
			}
			
			.remen_shuju{
				width: 100%;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				cursor: pointer;
				
				.remen_shuju1{
					width: 100%;
					height: 5.6rem;
					
					.shipin_dianzan{
						padding: 0.15rem 0.4rem;
						background-color: rgba(0,0,0,0.8);
						display: flex;
						justify-content: space-around;
						align-items: center;
						text-align: center;
						border-radius:0.6rem ;
						float: right;
						margin-top:0.4rem ;
						margin-right:0.4rem ;
						text-align: center;
						
						img{
							display: inline;
							width: 0.5rem;
							// border-radius:50% ;
							vertical-align: middle;
						}
						
						img:nth-of-type(2){
							display: none;
						}
						
						span{
							margin-left:0.2rem ;
							display: inline;
							color: #fff;
							font-size: 0.3rem;
						}
					}
				}
				.remen_shuju2{
					background-color: rgba(0,0,0,0.5);
					padding: 0.1rem 0.3rem;
					box-sizing: border-box;
					
					h2{
						color: #fff;
						font-size: 0.4rem;
					}
					p{
						color: #fff;
						font-size: 0.3rem;
						line-height: 0.6rem;
						
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box; 
						-webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
						-webkit-box-orient: vertical;
					}
				}
			}
		}
		.shipinxin:nth-of-type(1){
			animation-delay: 0.35s;
		}
		.shipinxin:nth-of-type(2){
			animation-delay: 0.45s;
		}
		.shipinxin:nth-of-type(3){
			animation-delay: 0.55s;
		}
		.shipinxin:nth-of-type(4){
			animation-delay: 0.65s;
		}
		.shipinxin:nth-of-type(5){
			animation-delay: 0.75s;
		}
		
		.shipinxin:hover img{
			transform: scale(1.1);
		}
	}
</style>
